{{include file="header.tpl" title="Info"}}

<link rel="stylesheet" type="text/css" media="screen" href="/economy/css/ui.jqgrid.css" />

<script src="/economy/js/jquery/lang/grid.locale-en.js" type="text/javascript"></script>
<script src="/economy/js/jquery/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="/economy/js/piechart.js" type="text/javascript"></script>

<div class='menu'>
    <a href="{{$url_base}}accounts/showAccounts">Ver las cuentas</a>
    <a href="{{$url_base}}transactions/showForm">Añadir transacción nueva</a>
    <a href="{{$url_base}}transactions/showImportForm">Importar transacciones (actualmente solo soportado desde Bancaja)</a>
</div>

<!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

      // Load the Visualization API and the piechart package.
      google.load('visualization', '1', {'packages':['corechart', 'annotatedtimeline']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);

      var soroban_chart = new Soroban.PieChart( {url_base : '{{$url_base}}{{$interface_alias}}' });

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {
        soroban_chart.init ();
        soroban_chart.drawChart ();

      }

      google.setOnLoadCallback(drawTimeLineChart);
      function drawTimeLineChart() {

jQuery.ajax({
            url: 'http://localhost/economy/rw/transactions/getTimeLineChartData?from_date=2008-01-01&to_date=2011-02-02',
            dataType: 'json',
            success: function(json_data, textStatus, jqXHR){

                // Create our data table.
                var data = new google.visualization.DataTable();
                data.addColumn('date', 'Date');
        
        data.addColumn('number', 'Income');
        data.addColumn('string', 'title2');
        data.addColumn('string', 'text2');
data.addColumn('number', 'Expense');
        data.addColumn('string', 'title2');
        data.addColumn('string', 'text2');
data.addColumn('number', 'Total');
        data.addColumn('string', 'title1');
        data.addColumn('string', 'text1');
for (i=0; i<json_data.length; i++)
    json_data [i] [0] = eval (json_data [i] [0]);

                data.addRows(json_data);

        var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('timelinechart_div'));
        chart.draw(data, {displayAnnotations: true, displayZoomButtons: false, displayExactValues: true, colors: ['green', 'red', 'blue']});
            }
        });
      }

    $ (function(){
        $('#chart_move_before').click (
            function () {
                soroban_chart.moveDate (-1);
                soroban_chart.drawChart ();
            }
        )
        $('#chart_move_after').click (
            function () {
                soroban_chart.moveDate (1);
                soroban_chart.drawChart ();
            }
        )
    });
    </script>
<!--Div that will hold the pie chart-->
<div id = 'chart_move_before'> <<- </div>
<div id="chart_div"></div>
<div id = 'chart_move_after'> ->> </div>

<div id='timelinechart_div' style='width: 400px; height: 240px;'></div>

<img id="top" src="/economy/img/top.png" alt="">
<div id="grid_container">

    <h1><a>Accounts</a></h1>
    <table id="list4"></table>
    <div id='pager'></div>

    <script type='text/javascript'>
        var today_string = get_today_string();

        function get_today_string () {
            var d = new Date();
            return d.getFullYear().toString()
                + '-'
                + (d.getMonth() + 1).toString()
                + '-'
                + d.getDate().toString();
        }

        jQuery("#list4").jqGrid(
            {
            url:'{{$url_base}}{{$interface_alias}}/getTransactions',
            datatype: "json",
            height: 'auto',
            autowidth: true,
            colNames:[
                'Inv No',
                'Owner',
                'Description',
                'Amount',
                'Type',
                'Account',
                'To',
                'Date',
                'Label'],
            colModel:[
                {name:'id', index:'id', width:60, sorttype:"int", editable: true, hidden:true},
                {name:'owner',index:'owner', width:90, sorttype:"date", editable: false, hidden:true},
                {name:'description',index:'description', width:200, editable: true},
                {name:'amount',index:'amount', width:70, align:"right",sorttype:"float", editable: true},
                {name:'type',index:'type', width:80, align:"right", editable: true,
                    editrules:{required:true}, formoptions:{elmsuffix:'(*)'},
                    edittype: 'select', formatter: 'select',
                    editoptions:{value:"Expense:Expense;Income:Income;Refund:Refund;Transfer:Transfer"}},
                {name:'account',index:'account', width:80, align:"right", editable: true,
                    editrules:{required:true}, formoptions:{elmsuffix:'(*)'},
                    edittype: 'select', formatter: 'select',
                    editoptions:{value:":{{foreach $accounts as $data}};{{$data.id}}:{{$data.name}}{{/foreach}}"}},
                {name:'to', index:'going_to', jsonmap: 'going_to', width:80, align:"right", editable: true, hidden: true,
                    edittype: 'select', formatter: 'select',
                    editoptions:{value:"0:{{foreach $accounts as $data}};{{$data.id}}:{{$data.name}}{{/foreach}}"}},
                {name:'date',index:'date', width:90,align:"right",sorttype:"float", editable: true,
                    editoptions: { dataInit : 
                        function (elem) {$(elem).datepicker({ dateFormat: 'yy-mm-dd' });} ,
                        defaultValue: get_today_string()
                    } },
                {name:'label',index:'label', width:100, sortable:false, editable: true} ],
            multiselect: true,
            caption: "Transactions",
            pager: 'pager',
            rowNum: 25,
            rowList:[10, 25, 50],
            sortname: 'date',
            sortorder: 'asc',
            jsonReader : {
              root:"rows",
              page: "page",
              total: "total",
              records: "records",
              repeatitems: false,
              id: "id"
            }

            });

        jQuery("#list4").jqGrid('navGrid','#pager', {view:true}, //options
            {height:'auto',width: '400',dataheight: 300, closeOnEscape:true, url:"{{$url_base}}{{$interface_alias}}/add", closeAfterEdit: true,
                beforeShowForm : function(formid) {
                    $('#tr_type').children('.DataTD').children().change(
                    function(){
                        showHideGoingTo($(this));
                    }
                    );
                    showHideGoingTo($($('#tr_type').children('.DataTD').children()));
                }
            }, // edit options
            {height:'auto',width: '400',dataheight: 300, closeOnEscape:true, url:"{{$url_base}}{{$interface_alias}}/add", closeAfterAdd: true,
                beforeShowForm : function(formid) {
                    $('#tr_type').children('.DataTD').children().change(
                    function(){
                        showHideGoingTo($(this));
                    }
                    );
                    showHideGoingTo($($('#tr_type').children('.DataTD').children()));
                }
            }, // add options
            {url:"deleteUser"}, // del options
            {sopt : ['eq','ne','lt','gt', 'cn']}, // search options
            {height:'auto',width: '400',dataheight: 300, closeOnEscape:true} // view options
       );


       /* var mydata = [
            {{foreach $transactions as $data}}
                { id:"{{$data.id}}",invdate:"{{$data.date}}", name:"{{$data.description}}",
                    note:"{{$data.label}}", amount:"{{$data.amount}}",tax:"{{$data.account}}",total:"210.00"},
            {{/foreach}}
        ];
        for(var i=0;i<=mydata.length;i++) jQuery("#list4").jqGrid('addRowData',i+1,mydata[i]);
*/

function showHideGoingTo(type_element){
    if(type_element.val() == 'Transfer')
        $('#tr_to').show();
    else {
        $('#tr_to').children('.DataTD').children().val(0);
        $('#tr_to').hide();
    }
}

</script>

</div>
<img id="bottom" src="/economy/img/bottom.png" alt="">

{{include file="footer.tpl"}}

